import React from 'react';

import '@/assets/css/login.css'


const Password = () => {

    var [email, SetEmail] = React.useState('')
    let [loading, SetLoading] = React.useState(false)
    let [disabled, SetDisabled] = React.useState(false)
    let [loadingText, SetText] = React.useState('邮件正在发送中');
    let [msg, SetMsg] = React.useState('发送验证码');
    var T: any;


    const send = async () => {
        SetLoading(true)
        // console.log(email)

        // 按钮加一个倒计时
        var data = {
            email: email,
            action: 'send'
        }
        // var result = await React.HTTP.post('/business/email',data)

        // if(result.code == 0){
        //     React.error(result.msg,() => {})
        //     return false
        // }

        SetLoading(false)
        SetDisabled(true)


        SetMsg('60')
        
        T = setInterval(autoplay)
    }

    // 定时器
    let autoplay : any  = setTimeout(() => {
        if(Number(msg) <= 0){
            // 倒计时结束
            SetMsg('重新发送验证码');
            SetDisabled(false)
            clearInterval(T)
        }else{
            var count = Number(msg) - 1
            SetMsg(String(count))
        }
    },1000)


    console.log(msg)
    const handleChange = (e:any) => {
        SetEmail(e)
    }

    const change = (e:any) => {
        SetMsg(e)
        
    }

    const submit = async () => {

    }


    return (
        <>

            <div className="login">
                <div className='title'><h1>修改密码</h1></div>
                <React.UI.Form
                    name='form'
                    onFinish={submit}
                    footer={
                        <React.UI.Button block shape='rounded' type='submit' color='primary' size='large'>
                            确认
                        </React.UI.Button>
                    }
                >
                    <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                        <React.UI.Input placeholder="请输入邮箱" onChange={handleChange.bind(this)} />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="secret" label="验证码" rules={[{ required: true }]} extra={<React.UI.Button size='mini' color='primary' disabled={disabled} loading={loading} loadingText={loadingText} onClick={send} onChange={change.bind(msg)}>
                        {msg}
                    </React.UI.Button>}>
                        <React.UI.Input placeholder="请输入验证码" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name='password' label='新密码' rules={[{ required: true }]}>
                        <React.UI.Input type='password' placeholder='请输入新密码' />
                    </React.UI.Form.Item>

                </React.UI.Form>

                <div className='tips'>
                    <React.Router.Link to={'/business/login'}>
                        返回登录
                    </React.Router.Link>
                </div>
            </div>
        </>
    )
}

export default Password